<template>
  <div class="user-box">
    <UserInfo/>
    <div class="user-context">
      <div class="user-left">
        <UserBanner @switchTab="handleMessage" />
        <UserNewsList :newsList="newsList" :page="page" @switchPage="handlePage" />
      </div>
      <div class="user-right">
        <AdvertisementTh/>
        <AdvertisementTh/>
      </div>
    </div>
  </div>
</template>

<script>
import UserBanner from './UserBanner.vue'
import UserInfo from './UserInfo.vue'
import UserNewsList from './UserNewsList.vue'
import AdvertisementTh from '../category-components/AdvertisementTh.vue'

export default {
  name: "User",
  components: {
    UserInfo, UserBanner, UserNewsList, AdvertisementTh
  },
  data() {
    return {
      navItem: "发布的文章",
      newsList: "",
      page: {
          currentPage: 1, // 当前页码
          pageSize: 10, // 每页显示的条数
          total: 0, // 默认 0 条，等待数据库渲染
      },
    }
  },
  methods: {
    handleMessage(navItem) {
      this.navItem = navItem
      console.log(this.navItem);
      console.log(this.navItem == "发布的文章");
      console.log(this.page);
      
      if (this.navItem == "发布的文章") {
        this.getUserNews("userPostNews", this.page)
      } else {
        this.getUserNews("userCollectionNews", this.page)
      }
    },
    handlePage(page) {
      this.page = page
      console.log(this.page);
      
      if (this.navItem == "发布的文章") {
        this.getUserNews("userPostNews", this.page)
      } else {
        this.getUserNews("userCollectionNews", this.page)
      }
    },
    getUserNews(item, page) {
      this.$api.serviceNews.post(`api/news/${item}`, 
      {userAccount: this.$store.state.user.userAccount, page: page}, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        if (response.data.code == 200){
          console.log(response);
          this.newsList = response.data.data.pageListData
          this.page.total = response.data.data.total
        }
      })
      .catch(error => {
        console.error('失败', error);
      });
    }
  },
  mounted() {
    this.getUserNews("userPostNews", this.page)
  }
}
</script>

<style scoped>
.user-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.user-context {
  margin-top: 20px;
  display: inline-flex;
  align-items: flex-start;
  gap: 50px;
}
.user-left {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
</style>